﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <title>test-wpsjs页面</title>
    <script type="text/javascript" src="static/wpsjsrpcsdk.js"></script>
    <link rel="stylesheet" href="static/test.css" type="text/css" />
    <script src="static/message/vue.min.js"></script>
    <script src="static/message/index.js"></script>
    <link rel="stylesheet" href="static/message/index.css" type="text/css" />
</head>

<body>
    <div id='tishi'>
        <p style="text-align: center;">正在打开文件</p>
        <div>
            <progress id="openFile" value="0" max="100">
                <a style="text-align: center;">当前进度<span id="openfilespan" style="color:crimson;">0</span>%</a>
            </progress>
        </div>

    </div>
    <div id="app">
        <template>
            <el-button plain
                       @click="open1('成功成功成功成功')">
                成功
            </el-button>
            <el-button plain
                       @click="open2('警告警告警告警告')">
                警告
            </el-button>
            <el-button plain
                       @click="open3('消息消息消息消息')">
                消息
            </el-button>
            <el-button plain
                       @click="open4('错误错误错误')">
                错误
            </el-button>
        </template>
    </div>
    <div>
        <div style="margin-top: 50px;width: 1000px;">
            <a>请输入登录用户名称:</a>
            <input id="userName" class="input_parm" placeholder="请输入登录用户名称" type="text" width="600" value="test">
        </div>
        <div style="margin-top: 5px;width: 1000px;">
            <a>请输入文件上传路径:</a>
            <input id="UploadUrl" class="input_parm" placeholder="请输入文件上传路径" type="text" width="600" value="http://192.168.60.233:5000/Upload">
        </div>

        <div class="partItem">多进程模式：</div>
        <div>
            <a href="#" onclick="openFileInSilentMode()">新建客户端：静默打开文件</a>
        </div>
        <div id="rootClients"></div>
    </div>
</body>
</html>
<script>
    var Main = {
        mounted() {
            //声明调用js的方法jsfunction的时候，调用vue的方法：vuefunction
            window.wopen1 = this.open1;
            window.wopen2 = this.open2;
            window.wopen3 = this.open3;
            window.wopen4 = this.open4;
        },
        methods: {
            open1(msg) {
                this.$notify({
                    title: '成功',
                    message: msg,
                    type: 'success'
                });
            },

            open2(msg) {
                this.$notify({
                    title: '警告',
                    message: msg,
                    type: 'warning'
                });
            },

            open3(msg) {
                this.$notify.info({
                    title: '消息',
                    message: msg,
                });
            },

            open4(msg) {
                this.$notify.error({
                    title: '错误',
                    message: msg,
                });
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
<script>
   var clientCount = 0;
    var dialogProgress;  //打开文件进度计数
    var interval;   //window.setInterval对象
    function openFileInSilentMode() {
        var wpsName='test'
        var wpsType='wps'
        var optionName='OpenFile' //操作方法
        var fileName="test.docx"
        var fNameNoEx="test"
        var uName = document.getElementById("userName").value;
        var uploadPath = document.getElementById("UploadUrl").value;
        var dlg = document.getElementById("tishi");
        dlg.style.display = 'block';
        dialogProgress = 0
        interval = setInterval(updateProgress, 100)
        document.body.style.pointerEvents = "none"

        houzui = ".docx"
        var url = location.origin + "/static/test" + houzui
        var wpsClient = new WpsClient(wpsType);
        var eleId = "clientId" + (++clientCount);
        wpsClient.onMessage = function (messageText) {
            var data = JSON.parse(messageText)
            var state = data["state"]
            if (state==0)
                wopen1(data["docId"] + "保存成功")
            else if (state == 1)
                wopen2(data["docId"] + "保存失败")
            else if (state == 2)
                wopen3(data["docId"] + "文件关闭")
        }

       
        //先静默启动客户端，在回调函数里面实现打开大文件
        wpsClient.StartWpsInSilentMode(wpsName, function () {
            var invokeParam = {
                Index: optionName,
                AppType: wpsType,
                filepath: url,      //要打开的文件路径
                CurrentUser:uName,
                FileName:fileName,
                FileTitle:fNameNoEx,
                UploadPath: uploadPath,
                FileId: eleId,
                MsgPath: location.origin + "/ClientMsg",
                MarkList: '[{ "Id": 1, "Content": "{当事人姓名}" }, { "Id": 2, "Content": "{当事人性别}" }, { "Id": 3, "Content": "{当事人地址}" }]'
            } //根据需求任意定义
            wpsClient.InvokeAsHttp(
                wpsName, //wps加载项的名字，在实际项目中写上对应的名字
                "InvokeFromSystemDemo", //要调用的在wps加载项中的函数名
                JSON.stringify(invokeParam), //调用的在wps加载项中的函数要传递的数据，是一个json对象，根据业务系统需求任意定义
                openFileCallbackFunc, //回调函数，wps加载项中InvokeFromSystemDemo这个函数的返回值作为这个函数的参数 
                false) //设置wps是否显示到最前面来
        });

        //打开文件成功后的交互代码
        function openFileCallbackFunc(result) {
            clearInterval(interval);
            //console.log(JSON.stringify(result))
            if (result.status !== 0) {
                setProgress(0)
                var dlg = document.getElementById("tishi");
                dlg.style.display = 'none';
                document.body.style.pointerEvents = "auto"
                alert(result.message)
                return;
            }
            setProgress(100);
            wpsClient.ShowToFront(wpsName, function () {
                setProgress(0)
                var dlg = document.getElementById("tishi");
                dlg.style.display = 'none';
                document.body.style.pointerEvents = "auto"
            });
        }
    }    

    function updateProgress() {
        setProgress(++dialogProgress);
    }

    function setProgress(newValue) {
        if (newValue < 90 || newValue == 100) {
            var progress = document.getElementById('openFile');
            progress.value = newValue;
            var span = document.getElementById("openfilespan")
            span.innerHTML = newValue;
        }
    }
</script>


